Etiquetas para Formularios en HTML

Los formularios en HTML permiten a los usuarios interactuar con un sitio web mediante el envío de datos. A continuación, se presentan las principales etiquetas utilizadas en los formularios HTML.

Principales Etiquetas para Formularios
Etiqueta	Descripción
`<form>`	Define un formulario HTML.
`<input>`	Permite ingresar datos. El tipo de entrada se especifica con el atributo `type`.
`<label>`	Asocia una etiqueta de texto con un control de formulario.
`<textarea>`	Define un área de texto multilínea.
`<button>`	Define un botón clicable (enviar o resetear el formulario).
`<select>`	Crea un menú desplegable.
`<option>`	Define una opción dentro del menú `<select>`.
`<fieldset>`	Agrupa elementos de un formulario.
`<legend>`	Proporciona un título para un grupo de elementos dentro de `<fieldset>`.
`<datalist>`	Define una lista de opciones predefinidas para un `<input>`.
`<optgroup>`	Agrupa opciones dentro de un `<select>`.

Ejemplos de Formularios en HTML

Formulario Básico

    <form action="/enviar-datos" method="POST">
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre"><br>
    
        <label for="email">Correo Electrónico:</label>
        <input type="email" id="email" name="email"><br>
    
        <label for="comentarios">Comentarios:</label>
        <textarea id="comentarios" name="comentarios"></textarea><br>
    
        <button type="submit">Enviar</button>
    </form>

Formulario con Diferentes Tipos de Input

    <form action="/procesar" method="POST">
        <label for="fecha">Fecha de nacimiento:</label>
        <input type="date" id="fecha" name="fecha_nacimiento"><br>
    
        <label for="numero">Número de teléfono:</label>
        <input type="tel" id="numero" name="telefono"><br>
    
        <label for="color">Color favorito:</label>
        <input type="color" id="color" name="color_favorito"><br>
    
        <button type="submit">Enviar</button>
    </form>

Formulario con Menú Desplegable

    <form action="/seleccion">
        <label for="pais">País:</label>
        <select id="pais" name="pais">
            <option value="mx">México</option>
            <option value="us">Estados Unidos</option>
            <option value="ca">Canadá</option>
        </select><br>
    
        <button type="submit">Enviar</button>
    </form>

Formulario con Fieldset y Legend

    <form action="/info">
        <fieldset>
            <legend>Información Personal</legend>
            <label for="nombre">Nombre:</label>
            <input type="text" id="nombre" name="nombre"><br>
    
            <label for="edad">Edad:</label>
            <input type="number" id="edad" name="edad"><br>
        </fieldset>
    
        <button type="submit">Enviar</button>
    </form>

Tipos de Input en Formularios HTML

Tipos de Input en Formularios
Tipo de Input	Descripción	Código
`text`	Campo de texto	<input type="text" placeholder="Escribe aquí">
`password`	Campo de contraseña	<input type="password" placeholder="Contraseña">
`email`	Campo de correo electrónico	<input type="email" placeholder="Correo electrónico">
`number`	Campo numérico	<input type="number" placeholder="Número">
`date`	Campo de fecha	<input type="date">
`color`	Selector de color	<input type="color">
`file`	Campo para subir archivos	<input type="file">

Etiquetas para Formularios en HTML

Ejemplos de Formularios en HTML

Formulario Básico

Formulario con Diferentes Tipos de Input

Formulario con Menú Desplegable

Formulario con Fieldset y Legend

Tipos de Input en Formularios HTML

Temario de Categorías